<template>
    <el-popover popper-class="chat-action-popover" placement="bottom-start" :width="80" trigger="click" ref="popoverRef">
        <template #reference>
            <el-button class="action"  @click.stop>
                <el-icon>
                    <MoreFilled />
                </el-icon>
            </el-button>
        </template>
        <div class="sidebar-action-btn">
            <div @click="pinChat">
                <img v-if="!props.pinned" src="@/assets/images/chat/ai_icon5.png" alt="">
                <img v-else src="@/assets/images/chat/ai_icon13.png" alt="">
                <span>{{ props.pinned ? '取消置顶' : '置顶' }}</span>
            </div>
            <div @click="editChat">
                <img src="@/assets/images/chat/ai_icon4.png" alt="">
                <span>重命名</span>
            </div>
            <div @click="deleteChat">
                <img src="@/assets/images/chat/ai_icon3.png" alt="">
                <span class="c-ff0000">删除</span>
            </div>
        </div>
    </el-popover>

    <ConversationNameEdit ref="conversationNameEditRef" @success="editNameSuccess" />


</template>

<script setup>
import { conversationDelete, conversationPin, conversationUnpin } from "@/api/chat";
import ConversationNameEdit from "./ConversationNameEdit.vue";
const { proxy } = getCurrentInstance()
const props = defineProps({
    chat: {
        type: Object,
        default: () => ({}),
    },
    pinned: {
        type: Boolean,
        default: false,
    },
})

const emit = defineEmits(["pin", "edit", "delete"]);

/** 置顶会话 */
const pinChat = () => {
    if (props.pinned) {
        conversationUnpin(props.chat.id).then(() => {
            proxy.$modal.msgSuccess('取消置顶成功')
            emit("pin", props.chat);
        }).catch(() => {
        })
    } else {
        conversationPin(props.chat.id).then(() => {
            proxy.$modal.msgSuccess('置顶成功')
            emit("pin", props.chat);
        }).catch(() => {
        })
    }
}
// 编辑会话名称
const conversationNameEditRef = ref(null);
/** 编辑会话名称 */
const editChat = () => {
    conversationNameEditRef.value.open();
    conversationNameEditRef.value.setFormData(props.chat);
}
const editNameSuccess = response => {
    emit("edit", response);
}
/** 删除会话 */
const deleteChat = () => {
    proxy.$confirm('您确定要删除此对话吗？', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        conversationDelete(props.chat.id).then(() => {
        }).catch(() => {
        })
        proxy.$modal.msgSuccess('删除成功')
        emit("delete", props.chat);
    }).catch(() => { })
}
/** 关闭弹窗 */
const popoverRef = ref(null);
const hide = () => {
    popoverRef.value.hide();
}


defineExpose({ hide });


</script>

<style lang="scss">
.chat-action-popover {
    padding: 5px !important;
    min-width: 120px !important;
    border-radius: 8px !important;

    .sidebar-action-btn {
        display: flex;
        flex-direction: column;
        font-size: 14px;

        div {
            display: flex;
            justify-content: flex-start;
            padding: 8px 10px;
            cursor: pointer;
            transition: all 0.2s;
            border-radius: 6px;
            margin: 2px 0;

            &:hover {
                background: rgba(213, 226, 248, 0.33);
            }
        }

        img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
        }
    }
}
</style>
